<template>
  <div>
    <sm-card class="margin">仅含内容的默认卡片，默认大小为 150 x 100 px</sm-card>
    <sm-card class="margin" style="border-radius: 10px;">
      <div slot="header">header</div>
      <div slot="default">包含 header 、自定义圆角边框的卡片</div>
    </sm-card>
    <sm-card class="margin" style="width:300px;padding:0px 10px;border-radius: 10px;">
      <div slot="header" style="border-bottom: 1px solid #dedede;height: 40px;line-height: 40px;">
        <span style="margin:0 auto;">header</span>
        <sm-button style="position: absolute;right:0;top:0;" type="primary" size="mini">确认</sm-button>
      </div>
      <div slot="default" style="padding: 10px 0px;text-align: center;">自定义 header 、大小 及 操作按钮的卡片</div>
    </sm-card>
    <p>
      <sm-card class="margin" shadow="always">总是显示阴影</sm-card>
      <sm-card class="margin" shadow="hover">鼠标悬浮时显示阴影（默认）</sm-card>
      <sm-card class="margin" shadow="never">从不显示阴影</sm-card>
    </p>
    <p>
      <sm-card class="margin" style="width:320px;height:300px;border-radius: 10px;">
        <div
          slot="header"
          style="border-bottom: 1px solid #dedede;
                 border-radius: 10px 10px 0px 0px;
                 color: #646464;
                 background: #fcfcfc;
                 background: linear-gradient(#f9f9f9, #f4f4f4);
                 height: 40px;
                 line-height: 40px;"
        >
          <span style="margin:0 auto;">header</span>
        </div>
        <div
          slot="default"
          style="padding: 10px 0px;
                 text-align: center;
                 font-size: 14px;
                 font-weight: 700;"
        >另一种自定义样式的卡片</div>
      </sm-card>
      <sm-card class="margin" style="width:330px;height:300px;border-radius: 10px;">
        <div slot="default" style="height: 220px;">
          <span style="margin:0 auto;">又一种自定义样式的卡片</span>
        </div>
        <div slot="footer" style="border-top: 1px solid #dedede;">
          <div
            style="width: 33%;height: 80px;border-right: 1px solid #dedede;display: inline-block;"
          ></div>
          <div
            style="width: 33%;height: 80px;border-right: 1px solid #dedede;display: inline-block;"
          ></div>
          <div style="width: 33%;height: 80px;display: inline-block;"></div>
        </div>
      </sm-card>
    </p>
  </div>
</template>

<script>
import SmCard from "../components/card/index.js";
import SmButton from "../components/button/index.js";

export default {
  name: "CardDemo",
  components: {
    SmCard,
    SmButton
  }
};
</script>

<style scoped>
.margin {
  margin: 5px;
}
</style>
